<template>
    <div>
        <div style="margin: 10px 0">
        </div>

        <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'">
            <el-table-column prop="id" label="ID" width="80" sortable></el-table-column>
            <el-table-column prop="title" label="演出名称">
                <!-- <template slot-scope="scope">
                    {{ '周杰伦巡回演唱会' }}
                </template> -->
            </el-table-column>
            <el-table-column prop="price" label="价格">
                <template slot-scope="scope">
                    {{ scope.row.price ? '￥' + scope.row.price : '--' }}
                </template>
            </el-table-column>
            <el-table-column prop="value" label="购买者"> <template slot-scope="scope">
                    {{ scope.row.name }}
                </template></el-table-column>
            <el-table-column prop="value" label="联系方式"> <template slot-scope="scope">
                    {{ scope.row.phone}}
                </template></el-table-column>
            <el-table-column prop="value" label="身份证"> <template slot-scope="scope">
                    {{ scope.row.idcard }}
                </template></el-table-column>


            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-button type="success" @click="handleEdit(scope.row)">查看
                    </el-button>
                    <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info"
                        icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.id)">
                        <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog title="信息" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false">
            <el-form label-width="120px" size="small" style="width: 80%; margin: 0 auto">
                <el-form-item label="演出名称">
                    <el-input disabled v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input disabled v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="购买者">
                    <el-input disabled v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input disabled v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份证">
                    <el-input disabled v-model="form.idcard" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <!-- <el-button type="primary" @click="save">确 定</el-button> -->
            </div>
        </el-dialog>
    </div>
</template>

<script>
import config from '@/utils/config'
const gloableURL = config.baseUrl;
export default {
    name: "vocalOrder",
    data() {
        return {
            tableData: [],
            total: 0,
            pageNum: 1,
            pageSize: 10,
            name: "",
            form: {},
            dialogFormVisible: false,
            multipleSelection: [],
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
        }
    },
    created() {
        this.load()
    },
    methods: {
        generateRandomIDCard() {
            function getChecksum(identity) {
                const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
                let sum = 0;
                for (let i = 0; i < identity.length; i++) {
                    sum += parseInt(identity[i]) * weights[i];
                }
                return String(sum % 11).replace(/0/, '0').replace(/10/, 'X');
            }
            const prefixes = ['110108', '120108', '130108', '140108', '150108', '210108', '220108', '310108', '320108', '330108', '340108', '350108', '360108', '370108', '410108', '420108', '430108', '440108', '450108', '460108', '500108', '510108', '520108', '610108', '620108', '630108', '640108', '650108', '710108', '810108', '820108', '910108'];
            const randomPrefix = prefixes[Math.floor(Math.random() * prefixes.length)];
            const year = randomPrefix.slice(0, 6);
            const month = Math.floor(Math.random() * 12) + 1;
            const day = Math.floor(Math.random() * 30) + 1;
            const randomChecksum = Math.floor(Math.random() * 10);
            const identity = `${year}${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}${String(randomChecksum).padStart(5, '0')}`;
            return identity + getChecksum(identity);
        }

        ,
        generatePhoneNumber1() {
            const prefix = '1'; // 手机号码的固定前缀
            const length = 10; // 手机号码的长度，不包含固定前缀
            const digits = '0123456789';
            let phoneNumber = prefix; // 添加固定前缀

            // 生成随机后缀
            for (let i = 0; i < length - 1; i++) {
                phoneNumber += digits.charAt(Math.floor(Math.random() * digits.length));
            }

            return phoneNumber;
        },
        getRandomName() {

            var firstname = "赵钱孙李周吴郑王陈楮卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方任袁柳酆鲍史唐费廉岑薛雷贺倪汤滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹姚邵湛汪祁毛禹狄米贝明计伏成戴谈宋茅庞熊纪舒屈项祝董梁杜阮蓝闽席季麻强贾路娄危江童颜郭梅盛林刁锺徐丘骆高夏蔡田樊胡凌霍虞万支柯昝管卢莫经房裘缪干解应宗宣贲邓郁单杭洪包诸左石崔吉方龚嵇邢裴陆荣翁荀羊於惠甄家封芮羿储靳汲邴糜松井段富巫乌焦巴弓牧隗山谷车侯孙全郗班仰秋仲伊宫宁仇木甘斜厉戎祖武符刘景詹束龙叶幸司韶郜黎丘薄印宿白怀蒲邰从鄂索咸籍赖卓蔺屠蒙池乔阴郁胥能苍双闻莘党翟谭贡劳逄姬申扶堵冉宰郦雍郤璩桑桂濮牛寿通边扈燕冀郏浦尚农温别庄晏柴瞿阎充慕连茹习宦艾鱼容向古易慎戈廖庾终居衡步都耿满弘匡国文寇广禄阙东欧尉迟沃利蔚越司空隆师巩厍聂晁勾敖融冷鲜于辛阚那简饶空曾毋沙乜养鞠须丰上官关蒯相查后荆红游竺权逑盖益桓公";

            var lastname = "明国华建文平志伟东海强晓生光林小民永杰军波成荣新峰刚家龙德庆斌辉良玉俊立浩天宏子金健一忠洪江福祥中正振勇耀春大宁少剑云学仁涛瑞飞鹏安亚泽世汉达卫利胜敏群松克清长嘉红山贤阳乐锋智青跃元南武广思雄锦威启昌铭维义宗英凯鸿森超坚旭政传康继翔远力进泉茂毅富博霖顺信凡豪树和恩向道川彬柏磊敬书鸣芳培全炳基冠晖京欣廷哲保秋君劲栋仲权奇礼楠炜友年震鑫雷兵万星骏伦绍麟雨行才希彦兆贵源有景升惠臣慧开章润高佳虎根诚夫声冬奎扬双坤镇楚水铁喜之迪泰方同滨邦先聪朝善非恒晋汝丹为晨乃秀岩辰洋然厚灿卓轩帆若连勋祖锡吉崇钧田石奕发洲彪钢运伯满庭申湘皓承梓雪孟其潮冰怀鲁裕翰征谦航士尧标洁城寿枫革纯风化逸腾岳银鹤琳显焕来心凤睿勤延凌昊西羽百捷定琦圣佩麒虹如靖日咏会久昕黎桂玮燕可越彤雁孝宪萌颖艺夏桐月瑜沛杨钰兰怡灵淇美琪亦晶舒菁真涵爽雅爱依静棋宜男蔚芝菲露娜珊雯淑曼萍珠诗璇琴素梅玲蕾艳紫珍丽仪梦倩伊茜妍碧芬儿岚婷菊妮媛莲娟";

            var name = "";

            var first1 = "";

            var last1 = "";

            var first = Math.floor(Math.random() * firstname.length);

            first1 = firstname.substring(first, first + 1);

            var a = Math.random();

            if (a > 0.5) {

                for (let i = 0; i < 2; ++i) {

                    var last = Math.floor(Math.random() * lastname.length);

                    last1 += lastname.substring(last, last + 1);

                }


            } else {

                var last = Math.floor(Math.random() * lastname.length);

                last1 = lastname.substring(last, last + 1);

            }

            name = first1 + last1;

            return name;

        },
        load() {
            this.request.get("/vocalOrder/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    name: this.name,
                }
            }).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },
        save() {
            this.request.post("/vocalOrder", this.form).then(res => {
                if (res.code === '200') {
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.load()
                } else {
                    this.$message.error("保存失败")
                }
            })
        },
        handleAdd() {
            this.dialogFormVisible = true
            this.form = {}
            this.$nextTick(() => {
                if (this.$refs.img) {
                    this.$refs.img.clearFiles();
                }
                if (this.$refs.file) {
                    this.$refs.file.clearFiles();
                }
            })
        },
        handleEdit(row) {
            this.form = JSON.parse(JSON.stringify(row))
            this.dialogFormVisible = true
            this.$nextTick(() => {
                if (this.$refs.img) {
                    this.$refs.img.clearFiles();
                }
                if (this.$refs.file) {
                    this.$refs.file.clearFiles();
                }
            })
        },
        del(id) {
            this.request.delete("/vocalOrder/" + id).then(res => {
                if (res.code === '200') {
                    this.$message.success("删除成功")
                    this.load()
                } else {
                    this.$message.error("删除失败")
                }
            })
        },

        delBatch() {
            if (!this.multipleSelection.length) {
                this.$message.error("请选择需要删除的数据")
                return
            }
            let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
            this.request.post("/vocalOrder/del/batch", ids).then(res => {
                if (res.code === '200') {
                    this.$message.success("批量删除成功")
                    this.load()
                } else {
                    this.$message.error("批量删除失败")
                }
            })
        },
        reset() {
            this.name = ""
            this.load()
        },
        handleSizeChange(pageSize) {
            console.log(pageSize)
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum)
            this.pageNum = pageNum
            this.load()
        },
        handleFileUploadSuccess(res) {
            this.form.file = res
        },
        handleImgUploadSuccess(res) {
            this.form.img = res
        },
        download(url) {
            window.open(url)
        },
        exp() {
            window.open(gloableURL + "/vocalOrder/export")
            // window.open("http://localhost:5000/vocalOrder/export")
        },
        handleExcelImportSuccess() {
            this.$message.success("导入成功")
            this.load()
        }
    }
}
</script>


<style>
.headerBg {
    background: #eee !important;
}
</style>